<template>
	<div>
		<!-- <div style="margin-left: 1200px;">
			<el-button size="mini" type="primary" @click="addTask()" ><i class="el-icon-plus el-icon--right">创任务</i></el-button>
		</div> -->
		<div class="plist" style=" display: inline-block; text-align: center; border: #0000EE 1px solid; height: 500px; width: 160px;margin-top: 10px;">
			<el-select v-model="projectSort" v-on:change="chooseProject(projectSort)">
				<el-option key="1" label="项目完成时间排序" value="1" name="floor" />
				<el-option key="2" label="项目开始时间排序" value="2" name="floor" />
				<el-option key="3" label="项目创建时间排序" value="3" name="floor" />
			</el-select>
			<div class="line" />
			<happy-scroll color="rgba(255, 0, 255, 0.5)" size="5">
				<div style="height: 400px; width: 70%;">
					<el-card style=" font-size: small;width: 94%; height: 80px; margin-left: 1px;" v-for="item in projectNames" :key="item.id">
						<a style="cursor: pointer;" @click="task(item.name)">{{ item.name }}</a>
					</el-card>
				</div>
			</happy-scroll>
		</div>
		<!--使用draggable组件-->
		<div class="itxst" style="display: inline-block; float:right; width: 1070px;height: 75vh;">
			<div class="statu">
				<span>未开始</span>
				<div style="width: 100%;height: 4px;margin-top: 2px;margin-bottom: 2px;background: rgb(126 197 255);position: relative;text-align: center;" />

				<el-scrollbar>
					<div class="broder">
						<draggable
							v-model="arr1"
							:move="onMove"
							group="site"
							animation="300"
							dragClass="dragClass"
							ghostClass="ghostClass"
							chosenClass="chosenClass"
							@start="onStart"
							@add="add"
							draggable=".draggable"  
						>
						<!-- draggable这个控制只有一个显示（里面的是class名）配合下面动态生成class样式使用 -->
							<transition-group>
								<el-card v-if="this.arr1.length == 0" :key="8081" style="opacity: 0.4;">还没有任务</el-card>
								<el-card class="item" :class="draggableArry1[a]" v-for="(item,a) in arr1" :key="item.id">{{ item.name }}</el-card>
							</transition-group>
						</draggable>
					</div>
				</el-scrollbar>
			</div>

			<div class="statu">
				<span>正在进行中</span>
				<div style="width: 100%;height: 4px;margin-top: 2px;margin-bottom: 2px;background: rgb(9 145 255);position: relative;text-align: center;" />

				<div class="broder">
					<draggable
						v-model="arr2"
						:move="onMove"
						group="site"
						animation="300"
						dragClass="dragClass"
						ghostClass="ghostClass"
						chosenClass="chosenClass"
						@start="onStart"
						@add="add"
					>
						<transition-group>
							<el-card v-if="this.arr2.length == 0" :key="8081" style="opacity: 0.4;">还没有任务</el-card>

							<el-card class="item" v-for="item in arr2" :key="item.id">{{ item.name }}</el-card>
						</transition-group>
					</draggable>
				</div>
			</div>

			<div class="statu">
				<span>已暂停</span>
				<div style="width: 100%;height: 4px;margin-top: 2px;margin-bottom: 2px;background: rgb(253 193 55);position: relative;text-align: center;" />

				<div class="broder">
					<draggable
						v-model="arr3"
						:move="onMove"
						group="site"
						animation="300"
						dragClass="dragClass"
						ghostClass="ghostClass"
						chosenClass="chosenClass"
						@start="onStart"
						@add="add"
					>
						<transition-group>
							<el-card v-if="this.arr3.length == 0" :key="8081" style="opacity: 0.4;">还没有任务</el-card>
							<el-card class="item" v-for="item in arr3" :key="item.id">{{ item.name }}</el-card>
						</transition-group>
					</draggable>
				</div>
			</div>

			<div class="statu">
				<span>已完成</span>
				<div style="width: 100%;height: 4px;margin-top: 2px;margin-bottom: 2px;background: rgb(11 217 134);position: relative;text-align: center;" />

				<div class="broder">
					<draggable
						v-model="arr4"
						:move="onMove"
						group="site"
						animation="300"
						dragClass="dragClass"
						ghostClass="ghostClass"
						chosenClass="chosenClass"
						@start="onStart"
						@add="add"
					>
						<transition-group>
							<el-card v-if="this.arr4.length == 0" :key="8081" style="opacity: 0.4;">还没有任务</el-card>
							<el-card class="item" v-for="item in arr4" :key="item.id">{{ item.name }}</el-card>
						</transition-group>
					</draggable>
				</div>
			</div>
			<div class="statu">
				<span>已取消</span>
				<div style="width: 100%;height: 4px;margin-top: 2px;margin-bottom: 2px;background: rgb(203 208 219);position: relative;text-align: center;" />

				<div class="broder">
					<draggable
						v-model="arr5"
						:move="onMove"
						group="site"
						animation="300"
						dragClass="dragClass"
						ghostClass="ghostClass"
						chosenClass="chosenClass"
						@start="onStart"
						@add="add"
					>
						<transition-group>
							<el-card v-if="this.arr5.length == 0" :key="8081" style="opacity: 0.4;">还没有任务</el-card>
							<el-card class="item" v-for="item in arr5" :key="item.id">{{ item.name }}</el-card>
						</transition-group>
					</draggable>
				</div>
			</div>
			<div class="statu">
				<span>已关闭</span>
				<div style="width: 100%;height: 4px;margin-top: 2px;margin-bottom: 2px;background: rgb(131 138 157);position: relative;text-align: center;" />

				<div class="broder">
					<draggable
						v-model="arr6"
						:move="onMove"
						group="site"
						animation="300"
						dragClass="dragClass"
						ghostClass="ghostClass"
						chosenClass="chosenClass"
						@start="onStart"
						@add="add"
					>
						<transition-group>
							<el-card v-if="this.arr6.length == 0" :key="8081" style="opacity: 0.4;">还没有任务</el-card>
							<el-card class="item" v-for="item in arr6" :key="item.id">{{ item.name }}</el-card>
						</transition-group>
					</draggable>
				</div>
			</div>
		</div>

		<el-dialog :title="title" :visible.sync="show" @close="getData()" width="800px">
			<Detile v-if="show" :show.sync="show" @getData="getData()" :status="status" :editname="editname"></Detile>
		</el-dialog>
	</div>
</template>
<script>
import axios from '../../utils/axiosutils.js';
import Detile from './detile.vue';
//导入draggable组件
import draggable from 'vuedraggable';
export default {
	//注册draggable组件
	components: {
		draggable,
		Detile
	},
	data() {
		return {
			drag: false,
			title: '',
			editname: '',
			show: false,
			status: '',
			projectNames: [],
			projectSort: '项目完成时间排序',
			//定义要被拖拽对象的数组
			arr1: [],
			arr2: [],
			arr3: [],
			arr4: [],
			arr5: [],
			arr6: [],
			draggableArry1:["draggable"],
			
		};
	},
	created() {
		this.getData();
	},
	methods: {
		getData() {
			axios.get('/task/nstarted', resp => {
				this.arr1 = resp.obj;
			});
			axios.get('/task/ongoing', resp => {
				this.arr2 = resp.obj;
			});
			axios.get('/task/paused', resp => {
				this.arr3 = resp.obj;
			});
			axios.get('/task/completed', resp => {
				this.arr4 = resp.obj;
			});
			axios.get('/task/canceled', resp => {
				this.arr5 = resp.obj;
			});
			axios.get('/task/closed', resp => {
				this.arr6 = resp.obj;
			});
			axios.get('/project/projectSort', resp => {
				this.projectNames = resp.obj.etimelist;
			});
		},
		//选择项目顺序
		chooseProject(projectSort) {
			if (projectSort == 1) {
				axios.get('/project/projectSort', resp => {
					this.projectNames = resp.obj.etimelist;
				});
			} else if (projectSort == 2) {
				axios.get('/project/projectSort', resp => {
					this.projectNames = resp.obj.stimelist;
				});
			} else {
				axios.get('/project/projectSort', resp => {
					this.projectNames = resp.obj.ctimelist;
				});
			}
		},
		//
		task(item) {
			console.log(item);
			axios.get(
				'/task/project',
				resp => {
					this.arr1 = resp.obj.arry0;
					this.arr2 = resp.obj.arry1;
					this.arr3 = resp.obj.arry2;
					this.arr4 = resp.obj.arry3;
					this.arr5 = resp.obj.arry4;
					this.arr6 = resp.obj.arry5;
				},
				{
					name: item
				}
			);
		},

		//开始拖拽事件
		onStart() {
			this.drag = true;
		},
		onMove(e, originalEvent) {
			if (e.from.innerText == '还没有任务') return false;
			return true;
		},
		//拖拽结束事件
		add(e) {
			var toarr = e.to.innerText.split('\n');

			for (var i in toarr) {
				if (toarr[i] == e.item.innerText) {
					continue;
				}
				for (var j in this.arr1) {
					if (this.arr1[j].name == toarr[i]) {
						this.status = 0;
						this.title="移动到未开始"
						break;
					}
				}
				for (var j in this.arr2) {
					if (this.arr2[j].name == toarr[i]) {
						this.status = 1;
						this.title="移动到正在进行中"
						break;
					}
				}
				for (var j in this.arr3) {
					if (this.arr3[j].name == toarr[i]) {
						this.status = 2;
						this.title="移动到已经暂停"
						break;
					}
				}
				for (var j in this.arr4) {
					if (this.arr4[j].name == toarr[i]) {
						this.status = 3;
						this.title="移动到已完成"
						break;
					}
				}
				for (var j in this.arr5) {
					if (this.arr5[j].name == toarr[i]) {
						this.status = 4;
						this.title="移动到已取消"
						break;
					}
				}
				for (var j in this.arr6) {
					if (this.arr6[j].name == toarr[i]) {
						this.status = 5;
						this.title="移动到已关闭"
						break;
					}
				}
			}
			this.editname = e.item.innerText;
			this.show = true;
			this.drag = false;
			
		},
		addTask(){
			this.show = true;
			this.title="添加任务"
		}
	}
};
</script>
<style scoped>
.plist {
	box-shadow: 4px 5px 5px #6699cc;
}
/* 横线 */
.line {
	float: right;
	width: 100%;
	height: 4px;
	margin-top: 2px;
	margin-bottom: 2px;
	background: #eaf3fc;
	position: relative;
	text-align: center;
}
.statu {
	display: inline-block;
	width: 170px;
	margin-left: 8px;
	height: 560px;
	vertical-align: top;
	box-shadow: 4px 5px 5px rgb(85, 170, 255);
}
.broder {
	display: inline-block;
	width: 160px;
	/* margin-left: 8px; */
	height: 500px;
	vertical-align: top;
}

.ghostClass {
	background-color: blue !important;
}
.chosenClass {
	background-color: red !important;
	opacity: 1 !important;
}
.dragClass {
	background-color: blueviolet !important;
	opacity: 1 !important;
	box-shadow: none !important;
	outline: none !important;
	background-image: none !important;
}
.itxst {
	margin: 10px;
}
.title {
	padding: 6px 12px;
}
.col + .col {
	margin-left: 10px;
}

.item {
	margin: 5px 4px 5px 4px;
	background-color: #f1f1f1;
}
.item:hover {
	background-color: #fdfdfd;
	cursor: move;
}
.item + .item {
	border-top: none;
	margin-top: 6px;
}
</style>